<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>learn-PixiJS</title>
</head>
<body>

<script src="js/pixi.min.js"></script>

<script>

  const picArr = [];

//  picArr.push('media/fun.mp4');
  for (let i = 0; i < 71; i++) {
    const texture = (`images/1X1/S1a_${i}.png`);
    picArr.push(texture);
  }
  for (let i = 0; i < 63; i++) {
    const texture = (`images/1X1/S1b_${i}.png`);
    picArr.push(texture);
  }
  for (let i = 0; i < 15; i++) {
    const texture = (`images/1X1/S1c_${i}.png`);
    picArr.push(texture);
  }
  const app = new PIXI.Application({
    backgroundColor: 0x1099bb,
    width: 540,
    height: 540,
//    transparent: true
  });
  document.body.appendChild(app.view);
  const Loader = new PIXI.Loader,
    Resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache;
  Loader
      .add('media/video.mp4')
//    .add('media/fun.mp4')
    .add(picArr)
    .on("progress", loadProgressHandler)
    .load(onAssetsLoaded2);

  function loadProgressHandler(loader, resources) {
    console.log('loading progress: ', loader.progress)
  }
  function onAssetsLoaded2(loader, resources) {
    console.log("All files loaded");
  }
  //  app.stop();


  // Create play button that can be used to trigger the video
  const button = new PIXI.Graphics()
    .beginFill(0x0, 0.5)
    .drawRoundedRect(0, 0, 100, 100, 10)
    .endFill()
    .beginFill(0xffffff)
    .moveTo(36, 30)
    .lineTo(36, 70)
    .lineTo(70, 50);

  // Position the button
  button.x = (app.screen.width - button.width) / 2;
  button.y = (app.screen.height - button.height) / 2;

  // Enable interactivity on the button
  button.interactive = true;
  button.buttonMode = true;

  // Add to the stage
  app.stage.addChild(button);

  // Listen for a click/tap event to start playing the video
  // this is useful for some mobile platforms. For example:
  // ios9 and under cannot render videos in PIXI without a
  // polyfill - https://github.com/bfred-it/iphone-inline-video
  // ios10 and above require a click/tap event to render videos
  // that contain audio in PIXI. Videos with no audio track do
  // not have this requirement
  button.on('pointertap', onPlayVideo);


  function onPlayVideo() {
    // Don't need the button anymore
    button.destroy();

    // create a video texture from a path


//    videoTexture.baseTexture.source.autoplay = false;
//    videoTexture.baseTexture.source.pause();

    const videoTexture =  PIXI.Texture.from("media/video.mp4");
//      sprite = new Sprite(texture)
//    const texture = PIXI.Texture(PIXI.loader.resources.video.texture);

    // create a new Sprite using the video texture (yes it's that easy)
    const videoSprite = new PIXI.Sprite(videoTexture);

    // Stetch the fullscreen
    videoSprite.width = app.screen.width;
    videoSprite.height = app.screen.height;
//    texture.baseTexture.source.onseeked = function () {
//      texture.update()
//    };

    app.stage.addChild(videoSprite);
    onAssetsLoaded(videoTexture);

    const style = new PIXI.TextStyle({
      fontFamily: 'Arial',
      fontSize: 36,
      fontStyle: 'italic',
      fontWeight: 'bold',
      fill: ['#ffffff', '#00ff99'], // gradient
      stroke: '#4a1850',
      strokeThickness: 5,
      dropShadow: true,
      dropShadowColor: '#000000',
      dropShadowBlur: 4,
      dropShadowAngle: Math.PI / 6,
      dropShadowDistance: 6,
      wordWrap: true,
      wordWrapWidth: 440,
    });

    const richText = new PIXI.Text('挑战你的极限', style);
    richText.x = 50;
    richText.y = 250;

    app.stage.addChild(richText);

  }


  //  onAssetsLoaded();
  function onAssetsLoaded(videoTexture) {
    // create an array of textures from an image path
    const frames = [];

    for (let i = 0; i < 71; i++) {
      const texture = TextureCache[`images/1X1/S1a_${i}.png`];
      frames.push(texture);
    }
    for (let i = 0; i < 63; i++) {
      const texture = TextureCache[`images/1X1/S1b_${i}.png`];
      frames.push(texture);
    }
    for (let i = 0; i < 15; i++) {
      const texture = TextureCache[`images/1X1/S1c_${i}.png`];
      frames.push(texture);
    }
    const anim = new PIXI.AnimatedSprite(frames);
    anim.x = 0;
    anim.y = 0;
//    anim.anchor.set(0.5); // 原点
    anim.animationSpeed = 0.4; // 速度 24 / 60 = 0.4
    anim.play();

    app.stage.addChild(anim);
    // start animating
    app.start();
    setTimeout(() => {
//      app.stop();
      anim.stop();
      videoTexture.baseTexture.source.pause();
//      videoTexture.baseTexture.source.currentTime = 0.1;
      videoTexture.update();


//      setTimeout(videoTexture.baseTexture.source.play, 1000)
    }, 6000);
  }

  app.ticker.add((delta) => {
  })
</script>
</body>
</html>